<div class="" ng-controller="transferUploadsCtrl">
  <header class="pd4 text-right" style="border-bottom: 1px solid #ddd;">
    <div class="pull-left" style="position: relative;">
      <!-- placeholder: 根据名称或状态搜索 -->
      <input
        type="text"
        cleanable-input
        placeholder="{{'transframe.search.placeholder'|translate}}"
        class="form-control input-sm"
        style="width: 150px;"
        ng-model="sch.upname"
      />
    </div>

    <div class="pull-left">
      <a
        href=""
        ng-if="totalNum.upStopped>0"
        class="btn btn-link btn-sm"
        style="text-decoration: none;"
        ng-click="sch.upname='stopped'"
        ><span class="text-warning"
          ><i class="fa fa-info-circle"></i> {{totalNum.upStopped}}</span
        ></a
      >
      <a
        href=""
        ng-if="totalNum.upFailed>0"
        class="btn btn-link btn-sm"
        style="text-decoration: none;"
        ng-click="sch.upname='failed'"
        ><span class="text-danger"
          ><i class="fa fa-remove"></i> {{totalNum.upFailed}}</span
        ></a
      >
    </div>

    <!-- 启动全部 -->
    <button
      ng-disabled="allActionBtnDisabled"
      type="button"
      class="btn btn-default btn-sm"
      ng-click="startAll()"
      uib-tooltip="{{'start.all'|translate}}"
      tooltip-append-to-body="true"
    >
      <span class=""><i class="glyphicon glyphicon-play"></i></span>
    </button>

    <!-- 暂停全部 -->
    <button
      ng-disabled="allActionBtnDisabled"
      type="button"
      class="btn btn-default btn-sm"
      ng-click="stopAll()"
      uib-tooltip="{{'pause.all'|translate}}"
      tooltip-append-to-body="true"
    >
      <span class=""><i class="glyphicon glyphicon-pause"></i></span>
    </button>
    <!-- 清空已完成 -->
    <button
      type="button"
      class="btn btn-default btn-sm"
      ng-click="clearAllCompleted()"
      uib-tooltip="{{'clear.finished'|translate}}"
      tooltip-append-to-body="true"
    >
      <span class=""><i class="glyphicon glyphicon-trash"></i></span>
    </button>
    <!-- 清空所有 -->
    <button
      type="button"
      class="btn btn-default btn-sm"
      ng-click="clearAll()"
      uib-tooltip="{{'clear.all'|translate}}"
      tooltip-append-to-body="true"
    >
      <span class=""
        ><i class="text-danger glyphicon glyphicon-trash"></i
      ></span>
    </button>

    <div class="clearfix"></div>
  </header>

  <div
    class="clearfix"
    style="overflow: auto; height: 343px;"
    long-scroll-list
    load-more="loadMoreUploadItems"
    trigger-size="100"
  >
    <ul class="list-group list-condensed" style="margin-bottom: 0px;">
      <li
        class="list-group-item"
        ng-repeat="item in lists.uploadJobList|listFilter:schKeyFn:sch.upname|limitTo:limitToNum track by item.id"
      >
        <div class="col-sm-4">
          <div
            class="text-overflow"
            uib-tooltip-template="'upload-path-tooltip-tpl.html'"
            tooltip-placement="left"
            tooltip-append-to-body="true"
          >
            {{$index+1}}. {{::item.from.name}}
          </div>

          <div class="progress mg0" style="height: 4px;">
            <div
              class="progress-bar progress-bar-{{item.status|statusCls}}"
              ng-style="{width: (item.prog.loaded|persent:item.prog.total:item.status) + '%'}"
            ></div>
          </div>
        </div>

        <div class="col-sm-2 text-overflow text-{{item.status|statusCls}}">
          <small ng-show="item.status!='running'">
            {{item.status|status:1}}
            <i
              ng-if="item.message"
              uib-tooltip-template="'error-mess-tooltip-tpl.html'"
              tooltip-placement="left"
              tooltip-append-to-body="true"
              class="fa fa-info-circle"
              style="cursor: pointer;"
              ng-click="copyMessage(item)"
            ></i>
          </small>
          <small ng-show="item.status=='running'">
            {{item.speed|sizeFormat}}/s
          </small>
          <small ng-show="item.status=='retrying'">
            {{retryTimes}}
          </small>
        </div>

        <div class="col-sm-4 text-overflow">
          <small ng-show="item.prog.total"
            ><span ng-if="item.prog.loaded!=item.prog.total"
              >{{item.prog.loaded|sizeFormat}}/</span
            >{{item.prog.total|sizeFormat}}</small
          >
          <small ng-show="item.predictLeftTime"
            >, {{item.predictLeftTime|leftTimeFormat}}</small
          >
        </div>

        <div class="col-sm-2 text-right">
          <a
            ng-if="item.status=='running' || item.status=='retrying' || item.status=='waiting' || item.status=='verifying'"
            href=""
            ng-click="item.stop()"
            class="btn btn-default btn-xs"
          >
            <i class="glyphicon glyphicon-pause text-warning"></i>
          </a>

          <a
            ng-if="item.status=='stopped' || item.status=='failed' || item.status=='finished'"
            href=""
            ng-click="showRemoveItem(item)"
            class="btn btn-default btn-xs"
          >
            <i class="glyphicon glyphicon-remove text-danger"></i>
          </a>

          <a
            ng-if="item.status=='stopped' || item.status=='failed'"
            href=""
            ng-click="checkStartJob(item)"
            class="btn btn-default btn-xs"
          >
            <i class="glyphicon glyphicon-play text-success"></i>
          </a>
        </div>
        <div class="clearfix"></div>
      </li>
    </ul>

    <div class="clearfix text-center" style="padding: 4px;">
      {{limitToNum <
      (lists.uploadJobList|listFilter:schKeyFn:sch.upname).length?('loading'|translate):''}}
    </div>
  </div>
</div>

<script type="text/ng-template" id="upload-path-tooltip-tpl.html">
  <div class="break text-left">
    <div><label class="text-primary">From:&nbsp;</label>{{item.from.path}}</div>
    <div><label class="text-success">To:&nbsp;</label>oss://{{item.to.bucket}}/{{item.to.key}}</div>
  </div>
</script>
<script type="text/ng-template" id="error-mess-tooltip-tpl.html">
  <div class="break text-left">
    <div><label class="text-primary">Message:&nbsp;</label>{{item.message}}</div>
    <div ng-if="item.ecCode"><label class="text-success">EC Code:&nbsp;</label>{{item.ecCode}}</div>
    <div ng-if="item.requestId"><label class="text-success">Request Id:&nbsp;</label>{{item.requestId}}</div>
  </div>
</script>
